<template>
  <div style="display: flex">
    <div ref="chart_d2" style="height:290px;width: 50%;" />
    <div style="width: 50%;padding-top: 20px">
      <div>{{ product.name }}</div>
      <el-table
        style="margin-top: 20px"
        :show-header="false"
        :data="tableData"
      >
        <el-table-column

          prop="status"
        />
        <el-table-column

          prop="count"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
import resize from '@/components/Mixins/resize'
export default {
  name: 'CountChart2',
  mixins: [resize],
  props: {
    product: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      tableData: []
    }
  },
  watch: {
    product: {
      deep: true,
      handler(value) {
        if (value != null) {
          this.show()
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.show()
    })
  },
  methods: {
    show() {
      this.chart = new Charts(this.$refs['chart_d2'])
      const allTitle = this.$t('all')
      const onlineTitle = this.$t('ONLINE')
      const offlineTitle = this.$t('OFFLINE')
      const unactiveTitle = this.$t('UNACTIVE')
      const disableTitle = this.$t('DISABLE')

      this.tableData = [
        {
          status: allTitle,
          count: this.product.online + this.product.offline + this.product.unactive + this.product.disable
        },
        {
          status: onlineTitle,
          count: this.product.online
        },
        {
          status: offlineTitle,
          count: this.product.offline
        },
        {
          status: unactiveTitle,
          count: this.product.unactive
        },
        {
          status: disableTitle,
          count: this.product.disable
        }
      ]

      this.chart.setOption({
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            data: [
              { name: onlineTitle, value: this.product.online / this.product.count * 100, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] },
              { name: offlineTitle, value: this.product.offline / this.product.count * 100, gradient: ['#ff9f7f', '#ffdb5c', '#9fe6b8'], radius: '50%' },
              { name: unactiveTitle, value: this.product.unactive / this.product.count * 100, gradient: ['#e690d1', '#e062ae', '#fb7293'], radius: '40%' },
              { name: disableTitle, value: this.product.disable / this.product.count * 100, gradient: ['#e7bcf3', '#9d96f5', '#96bfff'], radius: '30%' }
            ],
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            dataItemStyle: {
              lineCap: 'round'
            },
            backgroundArc: {
              show: false
            },
            details: {
              show: true,
              formatter: '{name} {value}%',
              position: 'start',
              offset: [-10, 0],
              style: {
                fill: '#1ed3e5',
                fontSize: 13,
                textAlign: 'right'
              }
            }
          }
        ]
      })
    }
  }
}
</script>


